<template>
	<view class="container coupon-container">
		<view class="page-top">
			<view class="yuan-btn top-btn " :class="pageType===''&&'btn-active'" @click="clickType('')">全部</view>
			<view class="yuan-btn top-btn" :class="pageType==='商城券'&&'btn-active'" @click="clickType('商城券')">商城券</view>
			<view class="yuan-btn top-btn" :class="pageType==='通用券'&&'btn-active'" @click="clickType('通用券')">通用券</view>
		</view>
		<view class="page-main">
			<view class="page-list" :class="(item.status!==0)&&'unUse'" v-for="item in pageList" :key="item.id">
				<view class="list-top">
					<view class="list-title">{{item.name}}</view>
					<view class="list-date">{{getValidTime(item)}}有效</view>
					<view class="list-tips" v-if="item.categories.length>0">限制品类：部分分类商品可用</view>
					<view class="list-tips" v-else>限制品类：所有分类商品可用</view>

					<view class="list-tips" v-if="item.goodsList.length>0">限制商品：部分商品可用</view>
					<view class="list-tips" v-else>限制商品：所有商品可用</view>

					<view class="list-tips" v-if="item.type==='商城券'">限制平台/门店：自营商城</view>
					<view class="list-tips" v-else>限制平台/门店：平台和门店通用</view>
					<view class="list-abs">
						<view class="list-num-box">
							<text class="list-num-unit">¥</text>
							<text class="list-num">{{$toYuan(item.discountAmount)}}</text>
						</view>
						<view class="list-num-tips">满{{$toYuan(item.minAmount)}}可用</view>
					</view>
				</view>
				<view class="list-bottom">
					<view class="yuan-btn btn-primary-opacity" v-if="item.status===0"
						@click="clickUse(item)">去使用</view>
					<view class="yuan-btn btn-primary" v-else-if="item.status===1">已使用</view>
					<view class="yuan-btn btn-primary" v-else>已作废</view>
				</view>
			</view>
			<view class="not-more" v-if="isLoading">加载中...</view>
			<view class="null-page" v-else-if="pageList.length<=0 ">
				<text class="iconfont">&#xe642;</text>
				<view class="null-page-tips">暂无数据~</view>
			</view>
			<view class="not-more" v-else-if="notMore">没有更多了...</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import { format, hideLoading, showLoading, showToast } from '../../common/util';
	import userApi from '../../common/userApi';
	const isLoading = ref(false)
	const notMore = ref(true)
	const pageSize = 10
	let pageNum = 1
	const pageType = ref('')
	const pageList = ref([])
	onMounted(async () => {
		await getPageList()
	})
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum = pageNum + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum = 1
		pageList.value = []
		getPageList()
	}
	onReachBottom(() => {
		//loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const params = { pageNum, pageSize, type: pageType.value }
			const res = await userApi.findUserCouponList(params)

			const rows = res.data || []
			if (rows.length < pageSize) notMore.value = true
			pageList.value = pageList.value.concat(rows)
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const jump = (url : string) => {
		uni.navigateTo({ url: url })
	}
	const clickType = (type : string) => {
		pageType.value = type;
		refreshList()
	}

	const getValidTime = (item) => {
		let sTime = '';
		let eTime = '';
		if (item.validityType === 2) {
			//有效期天数
			let timeNum = new Date(item.receiveTime).getTime()
			timeNum += item.validityDays * 24 * 60 * 60 * 1000
			sTime = format(item.receiveTime, 'yyyy-MM-dd 00:00')
			eTime = format(timeNum, 'yyyy-MM-dd 23:59')
			return sTime + '至' + eTime
		} else {
			sTime = format(item.validityStartTime, 'yyyy-MM-dd 00:00')
			eTime = format(item.validityEndTime, 'yyyy-MM-dd 23:59')
			return sTime + '至' + eTime
		}
	}
	const clickUse=(item)=>{
		if(item.type==="商城券"){
			//如果是商城券 跳转到商城小程序使用
			
		}else{
			jump(`/pagesUser/couponDetail/couponDetail?id=${item.couponId}&rTime=${item.receiveTime}`)
		}
	}
</script>

<style lang="scss">
	.coupon-container {
		background-color: #F2F3F8;

		.page-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx;
			background-color: #fff;

			.top-btn {
				display: inline-flex;
				width: 210rpx;
				background-color: #F5F5F5;
				font-size: 24rpx;
				color: #222222;
				height: 60rpx;
				border-radius: 60rpx;
				border: solid 1px #F5F5F5;
			}

			.btn-active {
				border: solid 1px #3AD3C1;
				background-color: rgba(58, 211, 193, 0.10);
				color: rgba(41, 159, 145, 1);
				font-weight: bold;
			}
		}

		.page-main {
			padding: 25rpx;
		}

		.page-list {
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 25rpx 25rpx 30rpx 25rpx;
		}

		.unUse {
			filter: grayscale(100%);
		}

		.list-top {
			position: relative;
			border-bottom: solid 1px rgba(232, 232, 232, 1);
			padding-bottom: 20rpx;
		}

		.list-title {
			font-size: 32rpx;
			color: #202020;
			font-weight: bold;
		}

		.list-date {
			font-size: 24rpx;
			color: #383838;
			margin-top: 20rpx;
		}

		.list-tips {
			font-size: 24rpx;
			transform-origin: 0 0;
			transform: scale(0.9);
			color: #6D6D6D;
			margin-top: 10rpx;
		}

		.list-abs {
			position: absolute;
			color: #FF8815;
			font-weight: bold;
			right: 0;
			top: 0;
			text-align: center;
		}

		.list-num {
			font-size: 44rpx;
		}

		.list-num-unit {
			font-size: 24rpx;
			transform-origin: 0 0;
			transform: scale(0.9);
		}

		.list-num-tips {
			font-size: 24rpx;
			margin-top: 5rpx;
			transform-origin: 0 0;
			transform: scale(0.9);
		}

		.list-bottom {
			margin-top: 30rpx;
			text-align: right;

			.yuan-btn {
				display: inline-flex;
				width: 200rpx;
				height: 60rpx;
				border-radius: 60rpx;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
	}
</style>